<template>
    <view class="page2">
        <view  class="indexs">
            <nut-cell>
                <view class="Information">
                    <view class="Account">达人信息</view>
                    <view class="choose">性别</view>
                    <view class="region"  @click="() => { shows = true }">
                        <nut-cell :title="pickerSex[0] ? pickerSex[0].text : defautSex"></nut-cell>
                        <nut-icon class="icon" name="right"></nut-icon>   
                    </view>
                    <!-- <nut-divider class="line2" />
                    <view class="choose">所在区域</view>
                    <view class="region">
                        <nut-cell  @click="() => { show = true }" :title="cityName? cityName: '请选择地址'"></nut-cell>
                        <nut-icon  name="right"></nut-icon>
                    </view> -->
                    <nut-divider class="line2" />
                    <view class="choose">达人等级</view>
                    <view class="region" @click="() => { grade = true }">
                        <nut-cell :title="pickerStart[0] ? pickerStart[0].text : grades" ></nut-cell>
                        <nut-icon class="icon" name="right"></nut-icon>
                    </view>
                    <nut-divider class="line2" />
                    <view class="choose">截图证明</view>
                    <nut-uploader :url="config.oemInfo.qiniu_url" maximum="1" :maximize="1048576"  class="Screenshot" multiple  :data="formData" @oversize="OverLimit" @success="uploadSucc"></nut-uploader>
                    <view class="tip">请上传抖音个人主页或带货等级截图</view>
                </view>
            </nut-cell>
            <nut-cell>
                <view class="Contact">
                    <view class="Information" >
                        <view class="Account">联系人信息</view>
                        <view class="phone ">联系人电话</view>
                        <nut-input v-model="form.phone" placeholder="请输入联系人电话" :adjust-position="true" type="digit"/>
                        <nut-divider class="line2" />

                        <view class="phone">联系人微信</view>
                        <nut-input v-model="form.wx_account" placeholder="请输入联系人微信" :adjust-position="true"/>
                    </view>
                </view>
            </nut-cell>
            <nut-cell>
                <view class="Information">
                    <view class="Account">类别（最多选3个）</view>
                    <view v-for="item in type" :key="item.id" class="categoryRow">
                        <view 
                            @click="checkedhandle(item)" 
                            :class="['category','fcenter', form.tags.some(name => name === item.name) ? 'Selected' : 'label']"
                        >{{ item.name }}</view>
                    </view>
                </view>
            </nut-cell>

            <view class="agreement">
                <nut-checkbox v-model="checkbox1">我已阅读</nut-checkbox>
                <view class="talent" @click="tipsClick">《达人入驻须知》</view>
            </view>

            <view class="attestation">
                <nut-button type="primary" @click="submit" class="fetch">提交认证</nut-button>
            </view>

            <!-- 协议内容 -->
            <nut-popup pop-class="popclass" v-model:visible="showPro">
                <view class="content">达人入驻须知</view>
                <view class="part">
                    <rich-text :nodes="config.oemInfo.star_contract"></rich-text>
                </view>
                <view class="Know">
                    <nut-button type="primary" @click="close" class="close">我知道了</nut-button>
                </view>
            </nut-popup>
        </view>
        <!-- 性别选择弹窗 -->
        <nut-picker 
            v-model:visible="shows" 
            v-model="pickerSex.value" 
            :columns="gender" 
            title="性别选择" 
            @confirm="confirmSex" 
            @change="change" 
            :safe-area-inset-bottom ="true"
        ></nut-picker>
        <!-- 城市选择弹窗 -->
        <!-- <nut-cascader
            title="城市选择"
            v-model:visible="show"
            v-model="cityCode"
            @change="areaChange"
            :options="config.oemArea"
            text-key="name"
            value-key="id"
            :safe-area-inset-bottom="true"
            class="popup-bottom"
        ></nut-cascader> -->
        <!-- 达人等级弹窗 -->
        <nut-picker 
           v-model:visible="grade" 
           v-model="pickerStart.value" 
           :columns="columns" 
           title="等级选择"
           @confirm="star_level" 
           @change="change" 
           :safe-area-inset-bottom ="true">
        </nut-picker>
    </view>
</template>



<script setup>
import { ref, reactive, onBeforeMount} from 'vue'
import { useUserStore, useConfigStore } from '@/stores'
import { showToast } from '@tarojs/taro'
import { redirectTo, switchTab, back } from '@/router'
import { getTag, QiniuToken, starInfoSubmit } from "@/api/index";
import "./index.scss"

const user = useUserStore()
const showPro = ref(false)
const checkbox1 = ref(false)
const pickerSex = ref([])
const pickerStart = ref([])
// const cityName = ref('')
// const cityCode =ref([0,0,0])
const config = useConfigStore()

const formData = ref({
    token: '',
    'x:type': 15,
});
onBeforeMount(() => {
    QiniuToken({file_type:'img'}).then((res) => {
        if(res&&res.data){
            formData.value.token = res.data.qiniuToken
        }
    })
})


getTag({type:1}).then((res) => {
    type.value = res.data
})


const close = () => {
    showPro.value = false
}
const type = ref([])

const submit = () => {
    if (!form.phone) {
        return showToast({ title: '请输入手机号', icon: 'error' })  
    }

    if(!(/^1[3456789]\d{9}$/.test(form.phone))){ 
        return showToast({ title: '手机号有误', icon: 'error' }) 
    }
 
    if(!form.sex){
        return showToast({ title: '请选择性别', icon: 'error' })
    }

    if(!form.star_level){
        return showToast({ title: '请选择达人等级', icon: 'error' })
    }

    if(!form.wx_account){
        return showToast({ title: '请输入微信', icon: 'error' })
    }

    // if (!form.area_code) {
    //     return showToast({ title: '请选择区域', icon: 'error' })
    // }

    if(form.tags.length < 1){
        return showToast({ title: '最少选一个类别', icon: 'error' })
    }

    if(!form.level_img){
        return showToast({ title: '截图未上传', icon: 'error' })
    }

    if (checkbox1.value === false) {
        return showToast({ title: '请阅读协议', icon: 'error' })
    }

    //如果想把值整合在一起，可以var一个数组，然后将值push进数组里
    starInfoSubmit({ id: user.info.id, ...form }).then(() => {
        const url = user.beforeAuthUrl ? user.beforeAuthUrl : '/pages/home/index'
        const path = url.split("?")[0]
        showToast({
            title: '提交成功',
            icon: 'success',
            duration: 2000
        })
        setTimeout(()=>{
            if(['/pages/home/index','/pages/ucenter/index','/pages/task/index'].indexOf(path)>-1){
                switchTab({ url })
            }else if(path==='/pagesub/stay/index'){
                back()
            }else{
                redirectTo({ url })
            }
        }, 2000)
    });
}

const checkedhandle = (item) => {
    const { id, name } = item
    const index = form.tags.indexOf(name)
    if (index > -1) {
        // 删除
        form.tags.splice(index, 1)
    } else if(form.tags.length === 3){
        showToast({
            title: '最多只能选三个',
            icon: 'error'
        })
    }else {
        // 添加
        form.tags.push(name)
    }
}

function tipsClick ()  {
    showPro.value = true
}

function OverLimit(){
    showToast({
        title: '图片超过1M',
        icon: 'error',
        duration: 2000
    })
}

// const show = ref(false);
const shows = ref(false);
const grade = ref(false);

const desc = ref('请选择');
const grades = ref('请选择');
const defautSex = '男/女'
const gender = [
    { text: '男', value: '1' },
    { text: '女', value: '2' },
]


const columns = ref([
    { text: 'LV1', value: 'LV1' },
    { text: 'LV2', value: 'LV2' },
    { text: 'LV3', value: 'LV3' },
    { text: 'LV4', value: 'LV4' },
    { text: 'LV5', value: 'LV5' },
    { text: 'LV6', value: 'LV6' },
    { text: 'LV7', value: 'LV7' }
]);

// const area_code = ({ selectedValue, selectedOptions }) => {
//     desc.value = selectedValue.join(',');
// }
const confirmSex = ({ selectedValue, selectedOptions }) => {
    // 选择性别确认回调
    pickerSex.value = selectedOptions
    form.sex = selectedValue[0]
}
const star_level = ({ selectedValue, selectedOptions }) => {
    // grades.value = selectedValue.join(',');
    pickerStart.value = selectedOptions
    form.star_level = selectedValue[0]
}
const change = ({ selectedValue, selectedOptions }) => {
    console.log(selectedValue,'selectedValue');
};

// function areaChange(value, node){
//     console.log(node[node.length - 1],value[value.length - 1],value,'123')
//     cityName.value = node[node.length - 1].text // 显示的地区中文名字
//     cityCode.value = value  // 组件需要的数据  [40012,40013,40015]
//     form.area_code = value[value.length - 1] // 提交需要的数据  40012
// }
const form = reactive({
    sex: '',
    star_level: '', // 达人等级
    phone: '',
    wx_account: "",
    tags : [],
    // area_code:'',
    level_img: '',
});

// useDidShow(() => console.log('onShow'))
// useLoad((option) => {
//     console.log(33333, option)
// });

function uploadSucc(data){
    const Screenshot= JSON.parse(data.data.data)
    form.level_img = Screenshot.data.id
}
</script>

